<template>
  <basic-container>
    <div class="df" style="margin-bottom:20px">
      <div class="block">
        <span class="demonstration">退货申请日期：</span>
        <el-date-picker v-model="value1" type="daterange" range-separator="~" :start-placeholder=oldData :end-placeholder=newData size="mini" format="yyyy-MM-dd">
        </el-date-picker>
      </div>
      <div class="block">
        <span>状态：</span>
        <el-select v-model="form1.status" placeholder="请选择" size="mini" :clearable="true">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="search" size="small">查询</el-button>
    </div>
    <el-button v-if="userInfo.role_name.includes('medical')" type="primary" style="margin: 0 0 25px;" size="small" @click="addRecord">申请退货</el-button>
    <el-table :data="tableData" style="width: 100%;height: 530px;" size="mini">
      <el-table-column label="退货单号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.refundBatchNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="配送企业">
        <template slot-scope="scope">
          <span>{{ scope.row.companyName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结算药品总数">
        <template slot-scope="scope">
          <span>{{ scope.row.totalMedicineCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结算总金额(元)" prop="totalFee">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag size="mini" :type="typec(scope)" plain disabled>{{ scope.row.label }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="结算申请日期">
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button slot="reference" @click="detail(scope.row)" type="primary" plain size="mini">查看</el-button>
          <el-button type="primary" v-if="userInfo.role_name.includes('distribution')&&scopr.row==0" @click="editRecord(scope.row)" size="mini">修改</el-button>
          <!-- <el-button type="primary" @click="toSend(scope.row)" size="mini" v-if="userInfo.role_name.includes('medical')&&scope.row.status==1||scope.row.status==4">处理</el-button>
          <el-button type="primary" @click="toSend(scope.row)" v-if="userInfo.role_name.includes('cityAdmin')&&scope.row.status==2||scope.row.status==3" size="mini">处理</el-button> -->
          <el-button type="primary" @click="toSend(scope.row)" v-if="scope.row.status==1&&userInfo.role_name.includes('distribution')||scope.row.status==2&&userInfo.role_name.includes('medical')||scope.row.status==3&&userInfo.role_name.includes('medical')||scope.row.status==4&&userInfo.role_name.includes('distribution')||scope.row.status==2&&scopr.row.areaInvolveStatus==1&&userInfo.role_name.includes('cityAdmin')||scope.row.status==6&&userInfo.role_name.includes('medical')||scope.row.status==7&&userInfo.role_name.includes('distribution')" size="mini">处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 20px 0;margin-left: 75%;">
      <el-pagination background @current-change="changePagination" :current-page="form1.current" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="Size" :page-sizes="[10, 20, 30, 40]">
      </el-pagination>
    </div>
    <el-dialog v-if="dialogVisible2" :width="dialogScreen?'': '1500px'" :visible.sync="dialogVisible2" append-to-body :fullscreen="dialogScreen" :class="[dialogScreen ? 'fullscreen' : 'no_fullscreen']" :beforeClose="changeScreen">
      <template slot="title">
        <div class="custom_dialog_header">
          <span class="el_dialog_title"></span>
          <div class="custom_dialog_menu">
            <i :class="dialogScreen?'el-icon-news': 'el-icon-full-screen'" @click="dialogScreen=!dialogScreen"></i>
          </div>
        </div>
      </template>
      <ProcessReturns @changeSure="changedia" :Send="SendData" :flag1="dialogVisible2" @closeDialog="dialogVisible2 = false"></ProcessReturns>
    </el-dialog>
    <el-dialog v-if="dialogVisible" :width="dialogScreen1?'': '1200px'" :visible.sync="dialogVisible" append-to-body :fullscreen="dialogScreen1" :class="[dialogScreen ? 'fullscreen' : 'no_fullscreen']" :beforeClose="changeTwoScreen">
      <template slot="title">
        <div class="custom_dialog_header">
          <span class="el_dialog_title"></span>
          <div class="custom_dialog_menu">
            <i :class="dialogScreen1?'el-icon-news': 'el-icon-full-screen'" @click="dialogScreen1=!dialogScreen1"></i>
          </div>
        </div>
      </template>
      <Request :Send="SendData" :tableAddEdit="tableAddEdit" :flag2="dialogVisible" @changeTwo="changeUpload"></Request>
    </el-dialog>
  </basic-container>
</template>

<script>
import Request from "../../components/orderRefund/Request.vue";
import ProcessReturns from "../../components/orderRefund/ProcessReturns.vue";
import { mapGetters } from 'vuex'
import { exportBlob } from "@/api/common";
import { getToken } from '@/util/auth';
import { Fathremove } from "../../api/businessTwo/orderDetail"
import { getList } from "../../api/businessTwo/orderRefund"
export default {
  components: {
    Request,
    ProcessReturns
  },
  mounted () {

  },
  data () {
    return {
      dialogScreen: false,
      dialogScreen4: false,
      unloadData: {
        orderId: "",
        orderNo: "",
        isUpdate: false,
        claimCompanyId: ""
      },
      CheckData: {},
      dialogVisible: false,
      dialogVisible2: false,
      from: {},
      SendData: {},
      form1: {
        status: null,
        current: 1,
        size: 10
      },
      dialogScreen1: false,
      Size: 10,
      newData: "",
      oldData: "",
      dialogVisible1: false,
      propsHttp: {
        url: 'url',
        name: 'name',
        res: 'data'
      },
      options: [
        {
          value: 0,
          label: '草稿'
        },
        {
          value: 1,
          label: '申请待确认'
        },
        {
          value: 2,
          label: '不同意退货'
        }, {
          value: 3,
          label: '退货状态待核实'
        }, {
          value: 4,
          label: '入库待验证'
        }, {
          value: 5,
          label: '已验收入库'
        }, 
        {
          value: 6,
          label: '医保局不通过'
        }, {
          value: 7,
          label: '医保局通过'
        }
      ],
      creatMaster: "",
      form: [],
      editForm: {},

      value1: [],
      page: {
        pageSize: 20
      },
      tableData: [],
      tableAddEdit: 'add'
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created () {
    this.getTableList();
    this.today();
  },
  methods: {
    formatMonth (dateString) {
      const year = dateString.slice(0, 4);
      const month = dateString.slice(4);
      const formattedDate = `${year}年-${Number(month)}月`;
      return formattedDate;
    },
    toSend (data) {
      this.dialogVisible2 = true
      this.SendData = data
    },
    closeDialog () {
      this.dialogVisible2 = false
    },
    addRecord () {
      this.tableAddEdit = 'add'
      this.SendData = {}
      this.dialogVisible = true
    },
    editRecord (row) {
      this.tableAddEdit = 'edit'
      this.SendData = row
      this.dialogVisible = true
    },
    detail (row) {
      this.tableAddEdit = 'view'
      this.SendData = row
      this.dialogVisible = true
    },
    changeScreen () {
      this.dialogScreen = false
      this.dialogVisible2 = false
    },
    changeTwoScreen () {
      this.dialogScreen1 = false
      this.dialogVisible = false
    },
    search () {
      let arr = []
      if (this.value1) {
        this.value1.map((v) => {
          arr.push(this.format(v));
          console.log(this.format(v));
          this.form1.startTime = arr[0]
          this.form1.endTime = arr[1]
        })
      } else {
        this.form1.startTime = null
        this.form1.endTime = null
      }
      this.getTableList()
    },
    changePagination (index) {
      this.form1.current = index
      this.getTableList()
    },
    changeTo (data) {
      this.dialogVisible1 = data
    },
    changedia (data) {
      this.dialogVisible2 = data
      this.dialogScreen = data
      this.getTableList()
    },
    ChangeDetail (row, data) {
      row.status = data
      this.SendData = row
      this.dialogVisible2 = true
    },
    changeUpload (data) {
      this.dialogVisible = data
      this.dialogScreen1 = data
      setTimeout(() => {
        this.getTableList()
      }, 800);
    },
    async getTableList () {
      console.log(this.form1);
      let res = await getList(this.form1)
      console.log(res);
      if (res.data.code == 200) {
        this.tableData = res.data.data.records
        this.Size = res.data.data.total

        console.log(this.tableData, res.data.data);
      }
    },
    format (date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const formattedDate = `${year}-${month}-${day}`;
      return formattedDate;
    },
    handleTemplate () {
      exportBlob(`/api/medpurBatch/download?${this.website.tokenHeader}=${getToken()}&templateName=${this.templateName}`).then((response) => {
        if (response.data.size > 0) {
          let url = window.URL.createObjectURL(response.data);
          let a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = this.templateName;
          a.click();
          window.URL.revokeObjectURL(url);
        } else {
          this.$message.warning('模板文件不存在!');
        }
      });
    },

    typec (a) {
      if(a.row.areaInvolveStatus==1&&a.row.status==2){
        a.row.label = "待医保局确认"
        return "warning"
      }
      else if (a.row.status == 0) {
        a.row.label = "暂存"
        return "info"
      } else if (a.row.status == 1) {
        a.row.label = "申请待确认"
        return "warning"
      } else if (a.row.status == 2) {
        a.row.label = "不同意退货"
        return "warning"
      } else if (a.row.status == 3) {
        a.row.label = "退货状态待核实"
        return "warning"
      } else if (a.row.status == 4) {
        a.row.label = "已发货待企业验证"
        return "warning"
      } else if (a.row.status == 5) {
        a.row.label = "已验收入库"
        return "success"
      } else if (a.row.status == 6) {
        a.row.label = "医保局通过"
        return "warning"
      } else if (a.row.status == 7) {
        a.row.label = "医保局不通过"
        return "warning"
      }
    },
    check () {
      this.$router.push("/businessTwo/orderRefund")
    },
    jump () {
      this.dialogVisible1 = false
    },
    handleDelete (ids) {
      Fathremove(ids).then(() => {
        this.getTableList();
        this.$message.success('删除成功');
      });
    },

    today () {
      let data = new Date();
      let year = data.getFullYear()
      let month = data.getMonth() + 1;
      let day = data.getDate()
      let oldMonth = month - 2;
      this.newData = `${year}-${month}-${day}`;
      this.oldData = `${year}-${oldMonth}-${day}`;
      console.log(this.newData, this.oldData);
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  margin-right: 64px;
}

.df {
  display: flex;
}
.cell {
  text-align: center;
}
::v-deep .el-dialog__body {
  padding: 0 20px !important;
}
::v-deep .el-dialog {
  z-index: 9999;
}
.custom_dialog_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom_dialog_menu {
  padding: 0px 30px 0 0;
}

.custom_dialog_menu i {
  color: #909399;
  font-size: 15px;
}

.el-icon-full-screen,
.el-icon-news {
  cursor: pointer;
}
::v-deep .v-modal {
  z-index: 20;
}

.block {
  font-size: 14px;
}
.all {
  width: 100%;
  height: 746px;
}
::v-deep th.el-table__cell {
  background-color: #fafafa;
}
::v-deep .el-table__cell {
  border-right: 1px solid #ebeef5 !important;
  text-align: center;
}
</style>
